<template>
        <div class="listCard">
            <div class="listCardItem" v-for="(item,index) in listCardItem" :key="index" @click="clickListCardItem(item.id)">
                <img :src="(item.picUrl || item.coverImgUrl) + '?param=400y400'">
                <div class="title">{{item.name}}</div>
            </div>
        </div>
</template>



<script setup>
import { ref, reactive, onMounted,defineEmits } from 'vue'
const emit = defineEmits(['clickListCardItem'])
const props = defineProps({
    listCardItem: {
        type: Array,
        default () {
            return []
        }
    }
})


const clickListCardItem = (id) => {
    emit('clickListCardItem',id)
}

</script>

<style lang="scss" scoped>
.RecommendListCard {
    // margin-bottom: 30px;
    // padding: 0 30px;
}

.listCard {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
   

}

.listCardItem {
    width: 18.4%;
    margin: 0 2% 20px 0;
    cursor: pointer;
}

.listCardItem:nth-child(5n) {
    margin-right: 0;

}

.listCardItem img {
    width: 100%;
    border-radius: 10px;
}
.title{
    font-size: 16px;
}
</style>